<template>
  <div>
    <!-- 栅格系统：element-UI分为24栏 el-row:一行，gutter属性，设置每一列之间的间距el-col：一列，span可以设置占多少分栏 ----24-->
    <el-row :gutter="100">
      <el-col :span="12">
        <p>我爱你塞北的大雪</p>
      </el-col>
      <el-col :span="12">
        <p>我不爱大雪</p>
      </el-col>
      <!-- xs:屏幕小于768  sm md lg xl -->
      <el-col :xs="12">
        <p>我爱豪哥</p>
      </el-col>
    </el-row>
    <!-- Button:常用-->
    <el-row :gutter="10">
      <el-col :span="24">
        <el-button>默认按钮</el-button>
        <el-button type="primary" size="mini" :round="true" icon="el-icon-mic"
          >主要按钮</el-button
        >
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning" icon="el-icon-thumb">警告按钮</el-button>
        <el-button type="danger" :loading="true">危险</el-button>
      </el-col>
    </el-row>
    <!-- 单选按钮 -->
    <el-row :gutter="10">
      <el-col :span="24">
        <el-radio-group v-model="msg">
          <el-radio-button label="上海"></el-radio-button>
          <el-radio-button label="北京"></el-radio-button>
          <el-radio-button label="广州"></el-radio-button>
          <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <!-- 第一列：prop设置显示那条数据，显示数组里面对象date属性 -->
      <el-table-column prop="date" label="游戏" width="width"> </el-table-column>
      <el-table-column prop="name" label="人生" width="width"> </el-table-column>
      <el-table-column prop="address" label="岁月" width="width"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      msg: "上海",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
</script>

<style scoped>
p {
  background: red;
}
</style>
